<template>
	<view>
		<u-sticky bgColor="#fff" :customNavHeight="0">
			<view class="navBox">
				<view class="nav">
					<view class="first-menu" :class="{'on':myHotelSelect==true}" @tap="showMyHotelPicker">
						<text class="name">{{searchParams.hotelName || '酒店名称'}}</text>
						<text class="iconfont triangle"></text>
					</view>
					<view class="first-menu" :class="{'on':calendarSelect==true}" @tap="showCalendar">
						<text class="name">{{dateRange[0] + ' 至 ' + dateRange[1]}}</text>
						<text class="iconfont triangle"></text>
					</view>
				</view>
			</view>

			<view style="margin-top: 12px;">
				<u-tabs :list="myHotelRoomListTab" keyName="roomName" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :current="currentTab" @change="changeTabs">
				</u-tabs>
			</view>
		</u-sticky>

		<view style="padding: 15px;"><u--text size=13 type="info" prefixIcon="rmb" iconStyle="font-size: 19px"
				text="价格变动"></u--text></view>
		<view class="charts-box">

			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>


		<view style="padding: 15px;"><u--text size=13 type="info" prefixIcon="map" iconStyle="font-size: 19px"
				text="变动次数"></u--text></view>
		<view class="charts-box">
			<qiun-data-charts type="pie" :opts="changeNumOpts" :chartData="changeNumData" />
		</view>

		<u-picker :show="myHotelSelect" :columns="myHotelListColumns" keyName="name" @cancel="hideMyHotelPicker"
			@close="hideMyHotelPicker" @confirm="confirmMyHotelPicker" closeOnClickOverlay></u-picker>

		<u-calendar :defaultDate="calendar.defaultDate" :maxDate="calendar.maxDate" :minDate="calendar.minDate"
			:monthNum="calendar.monthNum" color="#f56c6c" :show="calendarSelect" mode="range" @confirm="confirmCalendar"
			@close="hideCalendar" closeOnClickOverlay allowSameDay></u-calendar>

		<u-loading-page :loading="loading" loading-mode="circle" loadingText="正在加载" fontSize="14px"></u-loading-page>
	</view>
</template>


<script>
	// 将npm方式下载的echarts插件引入进来
	import {
		selectHotelUserListOption
	} from "@/api/system/hotel"
	import {
		selectHotelRoomAnalysis
	} from "@/api/system/room"


	// 接口

	export default {
		data() {
			return {
				loading: false,
				myHotelList: [],
				myHotelListColumns: [],
				myHotelRoomListTab: [],
				currentTab: 0,
				myHotelSelect: false,
				calendarSelect: false,
				calendar: {
					minDate: '',
					maxDate: '',
					defaultDate: [],
					monthNum: 13,
				},
				searchParams: {
					hotelId: '',
					hotelName: ''
				},
				// 日期范围
				dateRange: [],
				chartData: {},
				changeNumData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF","#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						labelCount: 5,
						itemCount: 5
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 100,
							max: 800
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom",
							onShadow: true,
							animation: "horizontal"
						}
					}
				},
				changeNumOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					},
				}
			}
		},
		onLoad(options) {
			this.chooseTimed();
			this.selectHotelUserListOption();
		},
		onShow() {
			
		},
		beforeDestroy() {

		},
		methods: {
			showMyHotelPicker() {
				this.myHotelSelect = !this.myHotelSelect
			},
			hideMyHotelPicker() {
				this.myHotelSelect = false
			},
			confirmMyHotelPicker(e) {
				this.myHotelSelect = false
				this.currentTab = 0;
				this.searchParams = {};
				this.searchParams.hotelName = e.value[0].name
				this.searchParams.hotelId = e.value[0].hotelId

				this.myHotelRoomListTab = this.myHotelList.filter(hotelList => hotelList.hotelId === e.value[0].hotelId)[0]
					.roomList

				this.getHotelRoomAnalysis();
			},
			showCalendar() {
				this.calendarSelect = !this.calendarSelect
			},
			hideCalendar() {
				this.calendarSelect = false
			},
			confirmCalendar(e) {
				this.calendar.defaultDate = e
				this.dateRange[0] = e[0]
				this.dateRange[1] = e[e.length - 1]
				this.calendarSelect = false

				this.getHotelRoomAnalysis();
			},
			/**
			 * 获取我关注的酒店列表(下拉框使用)
			 */
			selectHotelUserListOption() {
				selectHotelUserListOption({}).then(response => {
					this.myHotelList = response.data
					let array = [];
					array.push(response.data)
					this.myHotelListColumns = array

					if (this.myHotelList.length > 0) {
						this.searchParams.hotelName = this.myHotelList[0].name
						this.searchParams.hotelId = this.myHotelList[0].hotelId

						this.myHotelRoomListTab = this.myHotelList[0].roomList
						this.getHotelRoomAnalysis();
					} else {
						searchParams.hotelName = '暂无酒店'
					}

				})
			},
			/**
			 * 通过指定酒店查询酒店房价变动数据统计
			 */
			getHotelRoomAnalysis() {
				this.searchParams.id = this.myHotelRoomListTab[this.currentTab].id
				this.loading = true;
				selectHotelRoomAnalysis(this.addDateRange(this.searchParams, this.dateRange)).then(response => {
					let data = response.data
					this.loading = false;
					if (data.priceChangeList) {
						this.getServerData(data)
					}

					if (data.statusChangeList) {
						this.getServerData2(data.statusChangeList)
					}
				})
			},

			// 设置默认日期，最大值为今天，最小值为去年今天
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				let minyear = year - 1;
				this.calendar.minDate = minyear + '-' + month + '-' + day;
				this.calendar.maxDate = year + '-' + month + '-' + day;
				this.calendar.defaultDate = [year + '-' + month + '-' + day, year + '-' + month + '-' + day];
				this.dateRange[0] = year + '-' + month + '-' + day
				this.dateRange[1] = year + '-' + month + '-' + day
			},
			// 添加日期范围
			addDateRange(params, dateRange, propName) {
				let search = params;
				search.params = typeof(search.params) === 'object' && search.params !== null && !Array.isArray(search
					.params) ? search.params : {};
				dateRange = Array.isArray(dateRange) ? dateRange : [];
				if (typeof(propName) === 'undefined') {
					search.params['beginTime'] = dateRange[0];
					search.params['endTime'] = dateRange[1];
				} else {
					search.params['begin' + propName] = dateRange[0];
					search.params['end' + propName] = dateRange[1];
				}
				return search;
			},
			// 选择当前一个月之内的数据
			// chooseTimed() {
			// 	let date = new Date();
			// 	let year = date.getFullYear();
			// 	let month = String(date.getMonth() + 1);
			// 	let day = String(date.getDate());
			// 	month = month.padStart(2, '0');
			// 	day = day.padStart(2, '0');
			// 	this.calendar.maxDate = year + '-' + month + '-' + day;
			// 	this.calendar.defaultDate = year + '-' + month + '-' + day;

			// 	let nowTime = date.getTime();
			// 	let preTime = nowTime - 30 * 24 * 60 * 60 * 1000;
			// 	let preDate = new Date(preTime);
			// 	let preYear = preDate.getFullYear();
			// 	let preMonth = String(preDate.getMonth() + 1);
			// 	let preDay = String(preDate.getDate());
			// 	preMonth = preMonth.padStart(2, '0');
			// 	preDay = preDay.padStart(2, '0');
			// 	this.calendar.minDate = preYear + '-' + preMonth + '-' + preDay;
			// },

			getServerData(data) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: data.priceChangeList.key,
						series: [{
								name: "房间价格",
								linearColor: [
									[
										0,
										"#1890FF"
									],
									[
										0.25,
										"#00B5FF"
									],
									[
										0.5,
										"#00D1ED"
									],
									[
										0.75,
										"#00E6BB"
									],
									[
										1,
										"#90F489"
									]
								],
								setShadow: [
									3,
									8,
									10,
									"#1890FF"
								],
								data: data.priceChangeList.value
							},
							{
								name: "同比",
								linearColor: [
									[
										0,
										"#FAC858"
									],
									[
										0.33,
										"#FFC371"
									],
									[
										0.66,
										"#FFC2B2"
									],
									[
										1,
										"#FA7D8D"
									]
								],
								setShadow: [
									3,
									8,
									10,
									"#FC8452"
								],
								data: data.beforePriceChangeList.value
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerData2(statusChangeList) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: statusChangeList
						}]
					};
					this.changeNumData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			changeTabs(e) {
				if (this.currentTab === e.index) return;
				this.currentTab = e.index;
				this.getHotelRoomAnalysis();
			}
		},

	}
</script>

<style scope lang="scss">
	.navBox {
		margin-left: 20rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
		width: 95%;
		// position: fixed;
		// position: sticky;
		z-index: 997;
		flex-wrap: nowrap;
		display: flex;
		flex-direction: row;
		top: var(--window-top);
		left: 0;
		// top:100px;
		overflow-y: hidden;

		&.setDropdownBottom {
			// height: 345px;
			bottom: 0;
		}

		view {
			display: flex;
			flex-wrap: nowrap;
		}
	}

	.nav {
		width: 100%;
		height: 44px;
		border-bottom: solid 1rpx #eee;
		z-index: 12;
		background-color: #ffffff;
		flex-direction: row;

		.first-menu {
			width: 100%;
			font-size: 13px;
			min-width: 360rpx;
			;
			max-width: 360rpx;
			color: #757575;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			transition: color .2s linear;

			&.on {
				color: #ec652b;

				.iconfont {
					color: #ec652b;
				}
			}

			.name {
				height: 20px;
				text-align: center;
				text-overflow: clip;
				overflow: hidden;

				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.iconfont {
				width: 13px;
				height: 13px;
				align-items: center;
				justify-content: center;
				transition: transform .2s linear, color .2s linear;
			}
		}
	}


	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}

	/* 字体图标 */
	@font-face {
		font-family: "HM-FD-font";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
	}

	.iconfont {
		font-family: "HM-FD-font" !important;
		font-size: 13px;
		font-style: normal;
		color: #757575;

		&.triangle {
			&:before {
				content: "\e65a";
			}
		}

		&.selected {
			&:before {
				content: "\e607";
			}
		}
	}
</style>